<template>
  <div class="list">
    <div class="box">
      <div class="header">
        <div class="item-text box-title">
          为您找到相关企业至少 <span class="number-of-enterpise">{{ number }}</span> 个
        </div>
        <div class="item right">
          <el-button
            type="primary"
            @click="handleSetUserStoreComp"
          >
            <ali-icon icon="iconshizijiahao2"></ali-icon>
            收藏企业
          </el-button>
        </div>
      </div>
      <div class="condition">
        <div class="item">
          企业名称 
          <el-input
            placeholder="关键词模期匹配，支持用名"
            v-model="condition.company_name"
          />
        </div>
        <div class="item">
          经营范图 
          <el-input
            placeholder="关键词模糊匹配"
            v-model="condition.scope"
          />
        </div>
        <div class="item">
          企业类型 
          <el-input
            placeholder="关键词模糊匹配"
            v-model="condition.type"
          />
        </div>
        <div class="item">
          实体类型
          <el-input
            v-model="condition.entity_type"
            placeholder="企业（不包含个体户）"
          />
        </div>
        <div class="item">
          所在地区
          <el-cascader
            v-model="condition.region"
            clearable
            :options="regions"
            :props="{ value: 'id', label: 'cityname', checkStrictly: true }"
            @change="handleChange"
            placeholder="请选择地区"
          />
        </div>
        <div class="item">
          所属行业
          <el-select
            v-model="condition.industry"
            clearable
            placeholder="请选择行业"
          >
            <el-option
              v-for="(item,index) in industryList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="item">
          企业状态
          <el-select
            v-model="condition.status"
            clearable
            placeholder="请选择企业状态"
          >
            <el-option
              v-for="(item) in statusList"
              :key="item.status_id"
              :value="item.status_id"
              :label="item.name"/>
          
          </el-select>
        </div>
        <div class="item">
          信用代码
          <el-input
            placeholder="统一信用代码"
            v-model="condition.credit_code"
          />
        </div>
        <div class="item">
          企业规模
          <el-select
            v-model="condition.scale"
            clearable
            placeholder="请选择企业规模"
          >
            <el-option
              v-for="(item, index) in sizeList"
              :key="`reshhu${index}`"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
        <div class="item">
          企业地址
          <el-input
            v-model="condition.address"
            placeholder="请选择企业地址"
          />
        </div>
        <div class="item">
          效益评估
          <el-input
            v-model="condition.benefit"
            placeholder="请选择效益评估"
          />
        </div>
        <div class="item zczb">
          注册资本
          <input-number
            :suffix="true"
            v-model="condition.reg_money"
            :min="1"
            :max="99999"
            suffixText="万元"
          />
        </div>
        <div class="item">
          注册日期
          <el-date-picker
            style="width:200px"
            v-model="condition.reg_date"
            type="daterange"
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div class="item">
          员工人数
          <el-select
            v-model="condition.number_person"
            clearable
            placeholder="请选择员工/社保人数"
          >
            <el-option
              v-for="(item, index) in sizeList"
              :key="`reshhu${index}`"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
        <div class="item">
          过滤我的收藏
          <el-switch
            v-model="condition.filter_myself"
          >
          </el-switch>
        </div>
        <div style="padding:10px 15px">
          联系方式
        </div>
        <el-checkbox-group v-model="condition.contact_type">
            <el-checkbox label="手机">手机</el-checkbox>
            <el-checkbox label="邮箱">邮箱</el-checkbox>
            <el-checkbox label="座机">座机</el-checkbox>
          </el-checkbox-group>
        <div class="item center">
          <el-button
            type="primary"
            @click="subSearch"
          >
            <ali-icon icon="iconsousuo"></ali-icon>
            搜索
          </el-button>
          <el-button
            @click="resetCondition"
          >
            <ali-icon icon="iconzhongzhi"></ali-icon>
            重置
          </el-button>
        </div>
        <div class="item"></div>
      </div>
    </div>
    <div class="list-view box">
      <el-table
      class="list-table"
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
          type="expand"
          class-name="phone-cell"
        >
        <template slot-scope="{row}" >
          <el-table :data="row.tel">
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="联系方式" prop="telephone" />
            <el-table-column label="呼叫">
              <template slot-scope="{ row }">
                <span v-if="row.is_call">已呼叫</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="预约信息">
              <template slot-scope="{ row }">
                <div @click="alertReservationDialogVisible(row)">
                  <ali-icon
                    icon="iconshizijiahao2"
                    style="font-size: 1rem; color: #22ac38"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="提示信息" prop="tips" />
            <el-table-column label="标记信息" prop="mark" />
            <el-table-column label="准确度" prop="accuracy" />
            <el-table-column label="来源" prop="source" />
            <el-table-column label="号码检测" prop="checked" />
            <el-table-column label="电话标签">
              <template slot-scope="{ row }">
                <template v-if="row.marks">
                  <span>{{ row.marks }}</span>
                </template>
                <template v-else>
                  <div @click="alertPhoneDialogVisible(row)">
                    <ali-icon
                      icon="iconshizijiahao2"
                      style="font-size: 1rem; color: #22ac38"
                    />
                  </div>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </template>
        </el-table-column>
        <el-table-column
          prop="company_name"
          label="企业名称"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="industry"
          label="所属行业"
        >
        </el-table-column>
        <el-table-column
          label="所属地区"
        >
          <template slot-scope="{row}" >
            <span>{{ row.region }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="oper_name"
          label="法人"
        >
        </el-table-column>
        <el-table-column
          prop="econ_kind"
          label="企业类型"
        >
        </el-table-column>
        <el-table-column
          prop="regist_capi"
          label="注册资本"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="企业状态"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="企业信息"
        >
          <template slot-scope="{row}">
            <a @click="detail(row.company_id)">企业详情</a>
          </template>
        </el-table-column>
      </el-table>
      <page
        :total="total"
        :current.sync="params.page"
        :size.sync="params.pagesize"
        @change="search"
      />
      <el-dialog title="电话标签" :visible.sync="phoneDialogVisible" width="30%">
        <el-form
          :model="phoneForm"
          inline
          :rules="phoneFormRules"
          ref="phoneForm"
          label-position="left"
        >
                    <el-form-item
            label="联系方式反馈"
            :label-width="labelWidth"
            prop="contact_details"
            class="phone-dialog-visible-form-item"
          >
            <el-radio-group v-model="phoneForm.contact_details" size="small">
              <template v-for="(item, index) in contactDetailData">
                <el-radio :key="index" :label="item.key" border>
                  {{ item.name }}
                </el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="意向类别反馈"
            :label-width="labelWidth"
            prop="intent_categorys"
            class="phone-dialog-visible-form-item"
          >
            <el-radio-group v-model="phoneForm.intent_categorys" size="small">
              <template v-for="(item, index) in intentCategoryData">
                <el-radio :key="index" :label="item.key" border>{{
                  item.name
                }}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="线索质量反馈"
            :label-width="labelWidth"
            prop="clue_feedbacks"
            class="phone-dialog-visible-form-item"
          >
            <el-radio-group v-model="phoneForm.clue_feedbacks" size="small">
              <template v-for="(item, index) in clueFeedbackData">
                <el-radio :key="index" :label="item.key" border>{{
                  item.name
                }}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="setMarks">确 定</el-button>
          <el-button @click="phoneDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="预约标签"
        :visible.sync="reservationDialogVisible"
        width="30%"
        center
      >
        <el-form
          :model="reservationForm"
          inline
          :rules="reservationFormRules"
          ref="reservationForm"
          label-position="left"
        >
          <el-form-item label="当前预约" :label-width="labelWidth">
            <div
              v-if="appointments.length < 1"
              style="font-size: 0.8rem; color: #999"
            >
              无预约
            </div>
            <div v-else>
              <el-table
                :data="appointments"
                height="150"
                style="min-width: 26rem"
              >
                <el-table-column prop="appointment" label="预约信息" />
                <el-table-column prop="appointment_date" label="预约日期" />
              </el-table>
            </div>
          </el-form-item>
          <el-form-item
            label="新增预约"
            :label-width="labelWidth"
            prop="appointment_date"
          >
            <el-date-picker
              v-model="reservationForm.appointment_date"
              type="datetime"
              placeholder="选择日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="appointment">
            <el-input
              type="textarea"
              v-model="reservationForm.appointment"
              placeholder="编辑预约信息"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setAppointment">预 约</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { fetchRegion, fetchIndustry, fetchStatus} from "@/api";
import inputNumber from "@/components/form/section/inputNumber"
import Page from "@/components/list/page"
import { index } from "@/api/merchants/merchants"
import { parseTime } from "@/utils/tools"
import { setUserStoreComp } from "@/api/portrait/portrait"
import {
  setMarks,
  setAppointment,
  getAppointments,
} from "@/api/collection/collection"

export default {
  components: {
    Page,
    inputNumber
  },
  data() {
    const sizeList = this.$config("index",'sizeList')
    const contactDetailData = this.$config("index", 'contactDetailData')
    const intentCategoryData = this.$config("index", 'intentCategoryData')
    const clueFeedbackData = this.$config("index", 'clueFeedbackData')

    return {
      labelWidth: "100%",
      loading: true,
      number: 3253679,
      total:100,
      regions: [],
      tableData:[],
      loading:true,
      sizeList,
      industryList: [],
      statusList:[],
      condition: {
        company_name: '',
        scope: '',
        type: '',
        entity_type: '',
        region: [],
        // province: '',
        // area: '',
        // city: '',
        industry: '',
        status: '',
        credit_code: '',
        scale: '',
        address: '',
        benefit: '',
        contact_type: [],
        reg_money: ['',''],
        reg_date: [],
        // register_date_start: '',
        // register_date_end: '',
        number_person: '',
        filter_myself: false
      },
      params: {
        page:1,
        pagesize:10,
        company_name: '',
        scope: '',
        type: '',
        entity_type: '',
        region: [],
        // province: '',
        // area: '',
        // city: '',
        industry: '',
        status: '',
        credit_code: '',
        scale: '',
        address: '',
        benefit: '',
        contact_type: [],
        reg_money: ['',''],
        reg_date: [],
        // register_date_start: '',
        // register_date_end: '',
        number_person: '',
        filter_myself: false
      },
      pickerOptions: {
        // onPick: ({ maxDate, minDate }) => {
        //   if (minDate)
        //     this.condition.register_date_start = parseTime(minDate.getTime())
          
        //   if (maxDate)
        //     this.condition.register_date_end = parseTime(maxDate.getTime())
        // }
      },
      // 电话标签
      phoneDialogVisible: false,
      phoneForm: {
        id: 0,
        contact_details: '',
        intent_categorys: '',
        clue_feedbacks: '',
      },
      phoneFormRules: {
        contact_details: [
          { type: "string", message: "验证", trigger: "change" },
        ],
        intent_categorys: [
          { type: "string", message: "验证", trigger: "change" },
        ],
        clue_feedbacks: [
          { type: "string", message: "验证", trigger: "change" },
        ],
      },
      contactDetailData,
      intentCategoryData,
      clueFeedbackData,
      // 预约标签
      reservationDialogVisible: false,
      appointments: [],
      reservationForm: {
        id: 0,
        appointment_date: "",
        appointment: "",
      },
      reservationFormRules: {
        appointments: [{ type: "string", message: "验证", trigger: "change" }],
        appointment_date: [
          { type: "date", message: "验证", trigger: "change" },
        ],
        appointment: [{ type: "string", message: "验证", trigger: "change" }],
      }
    }
  },
  created() {
    this.getRegion()
    this.search()
    this.fetchIndustry()
    this.getStatus()

  },
  methods: {
    getRegion() {
      fetchRegion(res => {
        this.regions = res.data
      });
    },
    getStatus(){
      fetchStatus(res=>{
        this.statusList = res.data
      })
    },
    subSearch() {
      this.params.page = 1
      Object.assign(this.params, this.condition)
      this.search()
    },
    search(){
      this.loading = true
      index(this.params, response => {
        this.loading = false
        this.tableData = response.data
        console.log(response  )
        this.total = response.meta.total-response.user_total

        this.number = response.meta.total-response.user_total
      })
    },
    detail(id) {
      this.$router.push({
        path: 'merchants/merchants/detail/:id',
        name: 'merchants/merchants/detail',
        params: {
          id: id
        }
      })
    },
    alert(phone_number) {
      console.log(phone_number)
    },
    resetCondition() {
      this.condition = {
        company_name: '',
        scope: '',
        type: '',
        entity_type: '',
        region: [],
        // province: '',
        // area: '',
        // city: '',
        industry: '',
        status: '',
        credit_code: '',
        scale: '',
        address: '',
        benefit: '',
        contact_type: [],
        reg_money: ['',''],
        reg_date: [],
        // register_date_start: '',
        // register_date_end: '',
        number_person: '',
        filter_myself: false
      }
    },
    handleChange(value) {
      // this.condition.province = value[0]
      // this.condition.city = value[1]
      // this.condition.area = value[2]
    },
    fetchIndustry() {
      fetchIndustry(
        res => {
          if (res.code == 200) {
            this.industryList = res.data;
          }
        },
        err => {}
      )
    },
    handleSetUserStoreComp() {
      var output = [];
      for (var i=0; i < this.multipleSelection.length ; ++i)
          output.push(this.multipleSelection[i].company_id)
      
      setUserStoreComp({ company_id: output.join(",") }, response => {
        if (response.code === 200) {
          this.$message({
            message: '收藏成功',
            type: 'success'
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 电话标签,预约标签
    alertPhoneDialogVisible(row) {
      this.phoneForm.id = row.id;
      this.phoneDialogVisible = true;
    },
    alertReservationDialogVisible(row) {
      this.reservationForm.id = row.id;
      this.reservationDialogVisible = true;
      // 查询当前预约
      this.getAppointments(row.id);
    },
    setMarks() {
      this.phoneDialogVisible = false;
      let marks = []
      if (this.phoneForm.contact_details) marks.push(this.phoneForm.contact_details)
      if (this.phoneForm.intent_categorys) marks.push(this.phoneForm.intent_categorys)
      if (this.phoneForm.clue_feedbacks) marks.push(this.phoneForm.clue_feedbacks)
      marks = marks.join(",")

      setMarks({ id: this.phoneForm.id, marks: marks }, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.resetForm("phoneForm");
        }
        this.search()
      });
    },
    setAppointment() {
      this.reservationDialogVisible = false;
      setAppointment(this.reservationForm, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.resetForm("reservationForm");
        }
        this.search()
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAppointments(id) {
      getAppointments({ id: id }, (response) => {
        if (response.code === 200) {
          this.appointments = response.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/merchants/index";
</style>

<style>
.el-table thead {
  color: #2F3133;
}
.el-table th {
  background-color: #F5F7F9;
}
</style>
<style lang="scss">
.phone-cell {
  .el-icon-arrow-right {
    &::before {
      content: " " !important;
    }
  }
}
.el-table__body-wrapper .phone-cell {
  background: url(../../../assets/img/phone.png) no-repeat center;
  background-size: 1.4rem;
}
</style>
